<template>
  <div>
    <mu-dialog
      scrollable
      title="修改资料"
      width="500"
      max-width="90%"
      :esc-press-colse="false"
      :overlay-close="false"
      :open.sync="open"
    >
      <mu-form ref="form" :model="validateForm">
        <mu-form-item label="Email（用于登录，不可修改）" prop="email">
          <mu-text-field
            v-model="validateForm.email"
            prop="email"
            disabled
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item label="昵称" prop="nickNam" :rules="nickNamRules">
          <mu-text-field
            v-model="validateForm.nickName"
            prop="nickNam"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item label="登录密码" prop="password" :rules="passwordRules">
          <mu-text-field
            v-model.trim="validateForm.password"
            :action-icon="visibility ? 'visibility_off' : 'visibility'"
            :action-click="() => (visibility = !visibility)"
            :type="visibility ? 'text' : 'password'"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item
          label="确认密码"
          prop="confirmPassword"
          :rules="confirmPasswordRules"
        >
          <mu-text-field
            v-model="validateForm.confirmPassword"
            prop="confirmPassword"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item
          label="简介"
          prop="introduction"
          :rules="introductionRules"
        >
          <mu-text-field
            multi-line
            :rows="4"
            full-width
            v-model="validateForm.introduction"
            prop="introduction"
          >
          </mu-text-field>
        </mu-form-item>
      </mu-form>
      <mu-button slot="actions" flat small @click="clear">取消</mu-button>
      <mu-button slot="actions" flat small color="primary" @click="submit"
        >注册</mu-button
      >
    </mu-dialog>
  </div>
</template>
<script>
import { Icon } from '@/utils/'
export default {
  props: {
    open: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      Icon,
      visibility: false,
      validateForm: {
        nickNam: '',
        password: '',
        confirmPassword: '',
        introduction: ''
      },
      nickNamRules: [
        { validate: (val) => val.length <= 20, message: '昵称长度小于20个字符' }
      ],
      passwordRules: [
        { validate: (val) => !!val, message: '必须填写密码' },
        {
          validate: (val) => {
            let reg = /^[a-zA-Z]\w{5,19}$/
            return reg.test(val);
          },
          message: '密码格式错误'
        }
      ],
      confirmPasswordRules: [
        { validate: (val) => !!val, message: '必须填写确认密码' },
        {
          validate: (val) => {
            return this.validateForm.password === val
          },
          message: '密码不一致，请重新输入'
        }
      ],
      introductionRules: [
        { validate: (val) => val.length <= 1000, message: '简介最大1000个字符' }
      ]
    }
  },
  methods: {
    clear () {
      this.$refs.form.clear()
      this.validateForm = {
        nickNam: '',
        password: '',
        confirmPassword: '',
        introduction: ''
      }
      this.$emit('toggle', false)
    },
    submit () {
      this.$refs.form.validate().then((result) => {
        console.log('form valid: ', result)
      });
    }
  },
  watch: {
    userInfo (val) {
      this.validateForm = {
        ...val,
        password: '',
        comfirmPassword: ''
      }
    }
  }
}
</script>
<style scoped>
</style>
